<template>
  <!-- 菜单管理 -->
  <div class="menu">
    <el-card>
      <!-- 添加或编辑组件 -->
      <Forms
        ref="refForms"
        :menuListData="menuListData"
        :dialog="dialog"
        @refreshList="refreshList"
      ></Forms>
      <!-- 表单组件 -->
      <Lists
        :menuListData="menuListData"
        @editMenu="editMenu"
        @refreshDelList="refreshDelList"
      ></Lists>
    </el-card>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
import Lists from "./component/Lists.vue";
import Forms from "./component/Forms.vue";
export default {
  components: { Lists, Forms },
  data() {
    return {
      // 控制对话框的展开与隐藏
      dialog: {
        isShowDialog: false,
      },
    };
  },
  mounted() {
    this.getMenuListData();
  },
  computed:{
    // 导出菜单列表数据
    ...mapGetters({
      menuListData:"Menu/menuListData"
    }),
  },
  methods: {
    // 获取菜单列表
    ...mapActions({
      getMenuListData:"Menu/getMenuListData"
    }),
    // 向子组件传入id,进行编辑
    editMenu(id) {
      this.$refs.refForms.getOneMenuData(id);
    },
    // 刷新列表数据
    refreshList() {
      this.getMenuListData();
    },
    // 刷新删除后列表数据
    refreshDelList() {
      this.$refs.refForms.doMenuList();
    },
  },
};
</script>

<style >

</style>